<template>
  <view class="article-container">
		文章标题
    <text class="article-title" selectable="true">
      
    </text>

    <!-- 加载进度条 -->
    <progress 
      v-if="showProgress" 
      :percent="progressPercent" 
      stroke-width="3"
      class="progress-bar"
    ></progress>

    <!-- 文章内容 -->
    <rich-text :nodes="articleContent" class="article-content"></rich-text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      progressPercent: 0,
      showProgress: true,
      articleContent: `
        <div class="content-section">
          <p>AAAAAAAAAAAAAAAAAAA</p>
          
          <h3>一、这是一</h3>
          <p>111111111111111111111111111111111111</p>
          
          <h3>二、这是二</h3>
          <p>222222222222222222222222222222222222</p>
          
          <h3>三、这是三</h3>
          <p>333333333333333333333333333333333333</p>
          
          <p>本文作者：<strong>学号: 2531010120144 姓名: wmd</strong></p>
        </div>
      `
    };
  },
  mounted() {
    // 进度条动画逻辑
    const duration = 2000; // 总时长2秒
    const interval = 20; // 每20ms更新一次
    const totalSteps = duration / interval;
    const step = 100 / totalSteps;

    const timer = setInterval(() => {
      this.progressPercent += step;
      
      // 进度达到100%时停止并隐藏进度条
      if (this.progressPercent >= 100) {
        this.progressPercent = 100;
        clearInterval(timer);
        // 稍微延迟隐藏，确保100%状态可见
        setTimeout(() => {
          this.showProgress = false;
        }, 100);
      }
    }, interval);
  }
};
</script>

<style scoped>
.article-container {
  padding: 16px;
  background-color: #ffffff;
  min-height: 100vh;
}

.article-title {
  font-size: 22px;
  font-weight: bold;
  color: #333333;
  line-height: 1.5;
  margin-bottom: 16px;
  display: block;
}

.progress-bar {
  width: 100%;
  margin-bottom: 24px;
  height: 6px;
}

.article-content {
  color: #666666;
  font-size: 16px;
  line-height: 1.8;
}

/* 富文本内容样式 */
.content-section h3 {
  font-size: 18px;
  color: #333333;
  margin: 16px 0 8px 0;
}

.content-section p {
  margin-bottom: 16px;
}
</style>